<template>
    <div class="header-box">
        <div class="am-container box">
            <ul class="message-l">
                <li class="topMessage">
                    <span>亲，请登录</span>
                    <span class="register">免费注册</span>
                </li>
            </ul>
            <ul class="message-r">
                <li class="topMessage">商城首页</li>
                <li class="topMessage">个人中心</li>
                <li class="topMessage">
                    <span>购物车</span>
                    <span>{{ goodsAmount }}</span>
                </li>
                <li class="topMessage">收藏夹</li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref} from "vue";

const goodsAmount = ref(0)

</script>
<style lang="scss" scoped>
.header-box{
  .box{
    margin: 0 auto;
  }
  .am-container{
    max-width: 1000px;
    height: 35px;
    ul{
      padding: 0;
      margin: 0;
      li:hover{
        color: #e1251b;
      }
    }
    .message-l{
      float: left;
      padding-left: 20px;
    }
    .message-r{
      float: right;
      padding-right: 20px;
    }
    .topMessage{
      float: left;
      padding: 0 6px;
      height: 35px;
      line-height: 35px;
      list-style: none;
      font-size: 12px;
      cursor: pointer;
      .register{
        margin-left: 10px;
        color: #e1251b;
      }
    }
  }

}
</style>